{% load static %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>岗位可视化分析报告</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="{% static '/js/jquery.js' %}"></script>
    <link rel="stylesheet" href="{% static '/css/comon0.css' %}">
{#    <script type="text/javascript" src="{% static '/js/echarts.min.js' %}"></script>#}
    <script type="text/javascript" src="{% static '/js/main.js' %}"></script>
    <script type="text/javascript" src="{% static '/js/china.js' %}"></script>
        <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script type="text/javascript" src="{% static '/js/echarts-wordcloud.min.js' %}"></script>
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    });

    $(document).ready(function () {
        var whei = $(window).width();
        $("html").css({fontSize: whei / 20});
        $(window).resize(function () {
            var whei = $(window).width();
            $("html").css({fontSize: whei / 20})
        });
    });
</script>
<body>
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="{% static '/js/index.html' %}" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"><img src="{% static '/picture/loading.gif' %}"> 页面加载中...</div>
</div>
<div class="head">
    <h1>图书分析大屏展示系统</h1>
    <a href="{% url 'system:index' %}" style="margin-left: 10px;font-size: large">返回</a>
    <div class="weather"><span id="showTime"></span></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day +"日"+ "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>

</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">各类别发行数量</div>
                <div class="allnav" id="echart1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">价格分布情况</div>
                <div class="allnav" id="echart2"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">详情内容词云图</div>
                <div class="allnav" id="echart3"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter">{{ count_sum }}</li>
                        <li class="pulll_left counter">{{ count_today }}</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">总数据量</li>
                        <li class="pulll_left">今日抓取量</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"><img src="{% static '/picture/lbx.png' %}"></div>
                <div class="map2"><img src="{% static '/picture/jt.png' %}"></div>
                <div class="map4" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:3.4rem">
                    <div class="alltitle">出版社发行数量Top10</div>
                    <div class="allnav" id="echart4"></div>
                    <div class="boxfoot"></div>
                <div style="height:100%; width: 100%;">
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">书籍评分占比情况</div>
                <div class="allnav" id="echart5"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3rem">
                <div class="alltitle"></div>
                <div class="allnav" id="echart6"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<div class="back"></div>
</body>
</html>
